<!--
 * @Author: your name
 * @Date: 2021-07-24 15:15:00
 * @LastEditTime: 2021-07-24 17:18:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fd_-web\src\custom-component\Vcomponents\General\table1Model.vue
-->
<template>
  <div :ref="'tablewarp' + element.id" class="table1Model">
    <el-table
      :height="height"
      :data="tableList"
      stripe
      style="width: 100%"
      :ref="'table' + element.id"
    >
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="id" width="100" label="设备编号">
      </el-table-column>
      <el-table-column prop="describe" width="110" label="描述">
      </el-table-column>
      <el-table-column prop="time" label="报告时间"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    element: {
      type: Object,
    },
  },
  data() {
    return {
      tableList: [
        {
          uid: 1,
          type: "故障",
          id: "AHU-L6-01",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 2,
          type: "故障",
          id: "AHU-L6-02",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 3,
          type: "故障",
          id: "AHU-L6-01",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-03",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-04",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-05",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-06",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-07",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-01",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-08",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-09",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-10",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-11",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-12",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-13",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-14",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-15",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-16",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-17",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-18",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-19",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-20",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-21",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-22",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-23",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-24",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-25",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-26",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-27",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-28",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-29",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-30",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-31",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-32",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
        {
          uid: 4,
          type: "故障",
          id: "AHU-L6-33",
          describe: "热水阀防冻失灵",
          time: "16:30:01",
          status: "待处理",
        },
      ],
    };
  },
  computed: {
    height() {
      return this.element.style.height;
    },
    width() {
      return this.element.style.width;
    },
  },
  watch: {
    // width(val) {
    //   console.log(val);
    //   this.$refs["tablewarp" + this.element.id].style.transform = `scale(${val /
    //     500})`;
    // },
    // height(val) {
    //   console.log(val);
    //   this.$refs["tablewarp" + this.element.id].style.transform = `scale(${val /
    //     500})`;
    // },
  },
  methods: {
    //javascript原生自动滚动
    startmarquee(lh, speed, delay, marqueeObj) {
      //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
      var p = false;
      var t;
      // el-table__body-wrapper is-scrolling-left

      var o = this.$refs["table" + this.element.id].bodyWrapper.childNodes[0];

      o.innerHTML += o.innerHTML;
      o.style.marginTop = 0;
      o.onmouseover = function() {
        p = true;
      }; //鼠标移入，停止滚动
      o.onmouseout = function() {
        p = false;
      }; //鼠标移出，继续滚动

      function start() {
        t = setInterval(scrolling, speed); //定时器，自动滚动
        if (!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
      }

      function scrolling() {
        if (parseInt(o.style.marginTop) % lh != 0) {
          o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
          if (Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight / 2)
            o.style.marginTop = 0;
        } else {
          clearInterval(t);
          setTimeout(start, delay);
        }
      }
      setTimeout(start, delay);
    },
    reset() {
      // this.$refs["table" + this.element.id]
    },
  },
  created() {},
  mounted() {
    console.log(this.element);
    this.$nextTick(() => {
      this.startmarquee(48, 20, 1000); //引用函数
    });
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped></style>
